<template>
  <div id="staff">
    <!--条件查询-->
    <el-form :inline="true" :model="searchObj" ref="formList" class="demo-form-inline">
      <el-form-item label="用户名">
        <el-input v-model="searchObj.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="searchObj.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="searchObj.phone" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryBtn">查询</el-button>
        <el-button @click="resetForm('formList')">
          <i class="el-icon-refresh-right"></i>
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <!--新增-->
    <el-button type="primary" plain @click="addBtn">
      <i class="el-icon-user-solid"></i>
      新增用户
    </el-button>
    <el-button type="warning" plain @click="delsBtn">
      <i class="el-icon-delete-solid"></i>
      批量删除
    </el-button>

    <!--数据表格-->
    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="id"
          label="编号">
      </el-table-column>
      <el-table-column
          prop="avatarImg"
          label="头像">
        <template slot-scope="scope">
          <el-avatar :size="45" :src="scope.row.avatarImg" @error="errorHandler">
            <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
          </el-avatar>
        </template>
      </el-table-column>
      <el-table-column
          prop="username"
          label="用户名">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名">
      </el-table-column>
      <el-table-column
          prop="phone"
          label="手机">
      </el-table-column>
      <el-table-column
          prop="status"
          label="禁用/启用">
        <template slot-scope="scope">
          <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="0"
              :inactive-value="1"
              @change="switchStatus(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-button
              @click="assignRoles(scope.row.id)"
              type="text"
              size="small"
              icon="el-icon-user-solid">
            分配角色
          </el-button>
          <el-button
              @click="updateStaff(scope.row.id)"
              type="text"
              size="small"
              icon="el-icon-edit">
            修改
          </el-button>
          <el-button
              @click="delStaff(scope.row)"
              type="text"
              size="small"
              icon="el-icon-delete">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <router-view @query="queryBtn()"></router-view>
    <!--分页组件-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizeList"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "Staff",
  data() {
    return {
      //批量选中的row
      multipleSelection: [],
      //查询条件对象
      searchObj: {
        username: "",
        phone: "",
        name: ""
      },
      // 当前页号
      currentPage: 1,
      // 当前页大小
      pageSize: 5,
      // 总记录数
      total: 10,
      // 页大小列表
      pageSizeList: [2, 5, 10, 20],
      // 返回数据对象
      tableData: [],
    }
  },
 methods: {
    //删除
    delStaff(row) {
        this.$confirm('是否确认删除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          //确定
          const { data: res } = await this.$http.post(`/backUser/delBackUser`,row);
          this.$message.success(res);
          //界面刷新
          this.queryBtn();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
    },
    //批量删除
    delsBtn() {
     if(this.multipleSelection.length === 0)
        return this.$message.info("请先选中你要删除的用户！")
           this.$confirm('是否确认删除？', '提示', {
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             type: 'warning'
           }).then(async () => {
             //确定
             const { data: res } = await this.$http.post(`/backUser/delsBackUser`,this.multipleSelection);
             this.$message.success(res);
             //界面刷新
             this.queryBtn();
           }).catch(() => {
             this.$message({
               type: 'info',
               message: '已取消'
             });
           });
   },
    //新增员工
   addBtn() {
     this.$router.push('/addStaff')
   },
    //修改员工
   updateStaff(id) {
      this.$router.push({ path: '/updateStaff', query: { id: id } })
   },
    //分配角色
    assignRoles(id) {
      this.$router.push({ path: '/assignRoles', query: { id: id } })
   },
    //禁用/启用用户
   async switchStatus(row) {
    const result = await this.$http.post('/backUser/switchStatus',row);
     if(result.status === 200)
      this.$message.success(result.data)
   },
    //查询
   async queryBtn() {
     const { data: res } = await this.$http.post(`/backUser/getBackUserList/${this.currentPage}/${this.pageSize}`,this.searchObj);
     this.tableData = res.rows;
     this.total = res.total
   },
   //重置
   resetForm(formName) {
     console.log(formName)
     console.log(this.$refs[formName])
     this.$refs[formName].resetFields();
   },
   //页大小改变
   handleSizeChange(val) {
     this.pageSize = val
     this.queryBtn()
   },
   //当前页改变
   handleCurrentChange(val){
     this.currentPage = val
     this.queryBtn()
   },
   //批量选择
   handleSelectionChange(val) {
     this.multipleSelection = val;
   },
   //头像展示失败
   errorHandler() {
     return true
   },
 },
  created() {
    this.queryBtn();
  }
}
</script>

<style scoped>

</style>